<template>
    <div class="home-page-popup-wrapper" v-if="closePopup">
      <div class="popup-wrapper">
        <div class="popup-content">
          <div class="popup-popup-bg">
            <img src="/static/image/index/popup.png" class="popup-bg-img">
          </div>
          <div class="giveCoupon"><span>送<span>{{money}}<span> 元</span></span>优惠券</span></div>
          <div class="coupon-type">沃创学院用户专享</div>
          <div class="imm-receive" @click="toImmReceive">
            <img src="/static/image/index/imm-receive.png" class="imm-receive-img">
          </div>
        </div>
        <div class="close" @click="toClose">
          <img src="/static/image/index/close.png" class="close-img">
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "popup",
    props:{
      money:{
        type:Number,
        default:10
      }
    },
    data () {
      return {
        closePopup:true
      }
    },
    methods: {
      // 立即领取
      toImmReceive () {
        this.closePopup = false;
        wx.showToast({
          title: '领取成功',
          icon: 'success',
          duration: 2000
        })
      },
      // 关闭
      toClose () {
        this.closePopup = false;
      },
    }
  };
</script>

<style scoped lang="less">
  .home-page-popup-wrapper{
    position:fixed;
    left:0rpx;
    bottom:0rpx;
    width:750rpx;
    height:1334rpx;
    z-index:9999;
    background:rgba(0,0,.8,.3)
  }
  .popup-wrapper {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:544rpx;
    margin: 0rpx auto;
  }

  .popup-content {
    position:relative;
  }

  .popup-popup-bg .popup-bg-img {
    width:544rpx;
    height:899rpx;
  }
  /*背景*/
  .popup-popup-bg {
    /*position:absolute;*/
    /*top:610rpx;*/
    /*left:110rpx;*/
    /*right:96rpx;*/
    /*bottom:436rpx;*/
  }
  .giveCoupon {
    width:392rpx;
    height:58rpx;
    color:@bg_color;
    font-size:50rpx;
    position:absolute;
    top:367rpx;
    bottom:47rpx;
    left:126rpx;
    right:106rpx;
  }
  .coupon-type {
    width:288rpx;
    height:32rpx;
    color:@bg_color;
    font-size:@font_size_32;
    position:absolute;
    top:440rpx;
    bottom:47rpx;
    left:156rpx;
    right:106rpx;
  }
  /*关闭*/
  .close {
    padding:34rpx 0rpx;
  }
  .close .close-img {
    width:61rpx;
    height:61rpx;
  }

  /*立即领取*/
  .imm-receive {
    position:absolute;
    top:767rpx;
    bottom:47rpx;
    left:106rpx;
    right:106rpx;
  }
  .imm-receive .imm-receive-img {
    width:332rpx;
    height:84rpx;
  }
</style>
